<template>
	<zero-custom-bar :effect="false" color="#fff" title='车搭档'
		backgroundColor="linear-gradient(180deg, #FE9B23 0%, #FEA71D 100%)">
		<template v-slot:left>
			<view class="left" style="display: flex;align-items: center;padding-left: 15px;">
				<uni-icons type="location" color="#fff" size="20"></uni-icons>
				<text style="color: #fff;font-size: 32rpx;">{{cityName}}</text>
			</view>
		</template>
	</zero-custom-bar>
	<view class="shop" v-if="userData.merchantInfo" @click="toShop">
		<text>点击进入商家端></text>
	</view>
	<view class="header" v-if="!carInfoDTO"  >
		<text class="title">添加爱车享服务</text>
		<text class="remark">年检代办 · 品牌保养 · 特惠洗车</text>
		<button class="btn" @click="addCar">
			<image src="../../static/add.png" mode=""></image>
			<text>立即添加</text>
		</button>
		<image class="car" src="../../static/car_white.png" mode=""></image>
	</view>
	<view class="header-car" v-else @click.stop="onMyCar">
		<image class="car" src="../../static/icon8.png" mode=""></image>
		<view class="content">
			<image :src="carInfoDTO.carLogoPic" class="car-icon" mode=""></image>
			<view class="">
				<text class="car-name">{{carInfoDTO.carNumber}}</text>
				<text class="car-desc slh">{{carInfoDTO.carBrand+' '+carInfoDTO.carSeries+' '+carInfoDTO.carType}}</text>
			</view>
		</view>
		
	</view>
	<view class="tabs">
		<view class="" @click="bindInspection">
			<image src="../../static/icon1.png" mode=""></image>
			<text>年检代办</text>
		</view>
		<view class="" @click="bindMaintain">
			<image src="../../static/icon2.png" mode=""></image>
			<text>品牌保养</text>
		</view>
		<view class="" @click="bindCarWash">
			<image src="../../static/icon3.png" mode=""></image>
			<text>特惠洗车</text>
		</view>
		<view class="" @click="bindProxySriving">
			<image src="../../static/icon4.png" mode=""></image>
			<text>代驾服务</text>
		</view>
	</view>
	<view class="ad">
		
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000"
				indicator-color="rgba(255, 255, 255, .62)" indicator-active-color="#fff" class="swiper">
			<swiper-item v-for="(item,index) in bannerList" :key="index" @click="handleClickItem(item)">
				<image :src="item.adImg" mode=""></image>
			</swiper-item>
		</swiper>
	</view>

	<text class="block">精选评论</text>
	<view class="list">
		<view class="item" v-for="(item,index) in commentList" :key="index">
			<image :src="item.pic" class="pic" mode="aspectFill"></image>
			<text class="comment">{{item.content}}</text>
			<view class="user">
				<image src="/static/logo.png" mode=""></image>
				<text>{{item.nickName}}</text>
			</view>
		</view>
	</view>

</template>

<script setup>
	import {
		onLoad,
		onReachBottom,
		onShow,
		
	} from '@dcloudio/uni-app'
	import {
		ref,
		reactive
	} from 'vue';
	import {
		homepage,
		getCity,
		getMemberInfoByOpenId
	}from '@/api'
	import {wxOpenid,checkLogin,bindInvite} from '@/utils/login-sdk.js'
	
	const carState = ref(false)
	const cityName = ref()
	const bannerList = ref([])
	const carInfoDTO = ref()
	const userData = ref()
	const commentList = ref([
		{
			pic:"http://39.107.118.71/home-page/WechatIMG12.jpg",
			content:"店员洗的很仔细，服务态度好",
			nickName:"希史小栈"
		},
		{
			pic:"http://39.107.118.71/home-page/WechatIMG13.jpg",
			content:"洗的很干净，很认真",
			nickName:"0987"
		},
		{
			pic:"http://39.107.118.71/home-page/WechatIMG14.jpg",
			content:"洗车认真，服务态度超级好",
			nickName:"yang"
		},
		{
			pic:"http://39.107.118.71/home-page/WechatIMG15.jpg",
			content:"洗的干净认真，店铺很好找",
			nickName:"chao"
		},
		{
			pic:"http://39.107.118.71/home-page/WechatIMG10.jpg",
			content:"洗车仔细，服务态度也比较好，商家幽默，推荐大家过来洗车",
			nickName:"bigWhite"
		},
		{
			pic:"http://39.107.118.71/home-page/WechatIMG11.jpg",
			content:"服务很认真，店铺很大，服务热情，环境好，很不错的一家店",
			nickName:"enzuo"
		}
	])
	onLoad(async (params)=>{
		
		if(params.scene){
			/** 扫码邀请人 */
			bindInvite(params.scene)
		}
		getNowCity()
		
	})
	onShow(()=>{
		getData()
		getUserInfo()
	})

	/** 获取首页数据*/
	const getData = async()=>{
		const {memberId} = await wxOpenid()
		const res = await homepage({memberId})
		bannerList.value = res.result.bannerList
		carInfoDTO.value = res.result.carInfoDTO
	}
	/** 获取当前所在城市 */
	const getNowCity =  ()=>{
		uni.getLocation({
			type: 'wgs84',
			success: async (res)=> {
				const city = await getCity({lng:res.longitude,lat:res.latitude})
				cityName.value = city.result.cityName
			},
			fail: (err) => {
				uni.showModal({
					title:'位置授权提示',
					content:'打开定位失败，您可以检查手机定位是否开启后手动进行位置授权'
				})
			}
		});
	}
	/** 获取会员信息 */
	const getUserInfo = async () => {
		const {
			openId
		} = await wxOpenid()
		const res = await getMemberInfoByOpenId({
			openId
		})
		userData.value = res.result
	}
	/** 添加车辆/我的车辆 */
	const addCar = async() => {
		checkLogin(()=>{
			if (!carState) {
				uni.navigateTo({
					url: '/pages/car/car'
				})
			} else {
				uni.navigateTo({
					url: '/pages/addCar/addCar'
				})
			}
			
		})
		
		
	}
	/** 进入商家端 */
	const toShop = ()=>{
		uni.navigateTo({
			url:"/pages/merchant/merchant?userId="+userData.value.merchantInfo.userId
		})
	}
	/** 年检 */
	const bindInspection = () => {
		
		checkLogin(()=>{
			uni.navigateTo({
				url: "/pages/inspection/inspection"
			})
		})
		
	}
	/** 代驾 */
	const bindProxySriving = () => {
		checkLogin(()=>{
			uni.navigateTo({
				url: "/pages/proxyDriving/proxyDriving"
			})
		})
		
	}
	/** 品牌保养 */
	const bindMaintain = () => {
		checkLogin(()=>{
			uni.navigateTo({
				url: "/pages/maintain/maintain"
			})
		})
		
	}
	/** 特惠洗车 */
	const bindCarWash = () => {
		checkLogin(()=>{
			uni.navigateTo({
				url: "/pages/carWash/carWash"
			})
		})
		
	}
	/** 点击轮播图 */
	const handleClickItem = (item)=>{
		checkLogin(()=>{
			uni.navigateTo({
				url:item.url
			})
		})
		
	}
	/** 我的车辆列表*/
	const onMyCar = ()=>{
		console.log(9)
		uni.navigateTo({
			url:'/pages/myCar/myCar'
		})
	}
	
</script>

<style lang="scss">
	page {
		background: linear-gradient(180deg, #FE9B23 0%, #FFB32B, #FFFFFF 49%) no-repeat;
		padding-bottom: constant(safe-area-inset-bottom);
		/*兼容 IOS<11.2*/
		padding-bottom: env(safe-area-inset-bottom);
		/*兼容 IOS>11.2*/
	}
	.shop{
		margin: 10rpx auto;
		width: 702rpx;
		text{
			text-align: right;
			color: #fff;
			text-decoration: underline;
			display: block;
		}
	}
	.header-car{
		
		background: #FFFFFF;
		border-radius: 36rpx;
		border: 1px solid #F5F5F5;
		margin: 20rpx auto 38rpx;
		width: 702rpx;
		position: relative;
		
		.content{
			position: relative;
			width: 640rpx;
			height: 213rpx;
			display: flex;
			align-items: center;
			padding: 0 31rpx;
		}
		.car-icon{
			display: block;
			width: 118rpx;
			height: 118rpx;
		}
		view{
			margin-left: 15rpx;
			.car-name{
				font-weight: bold;
				font-size: 40rpx;
				color: #222222;
			}
			.car-desc{
				// display: block;
				font-size: 24rpx;
				color: #5F5F5F;
				width: 475rpx;
			}
		}
		
		.car {
			position: absolute;
			width: 702rpx;
			height: 213rpx;
			right: 0;
			bottom: 0;
			
		}
	}
	.header {
		width: 640rpx;
		height: 310rpx;
		background: #FFFFFF;
		border-radius: 36rpx;
		border: 1px solid #F5F5F5;
		margin: 49rpx auto 38rpx;
		padding: 0 31rpx;
		position: relative;

		.car {
			position: absolute;
			width: 286rpx;
			height: 286rpx;
			right: 17rpx;
			top: -78rpx;
		}

		.title {
			display: block;
			margin-top: 48rpx;
			margin-left: 19rpx;
			font-weight: bold;
			font-size: 40rpx;
			color: #222222;
			line-height: 45rpx;
		}

		.remark {
			display: block;
			margin-left: 19rpx;
			display: block;
			margin-top: 24rpx;
			font-weight: 400;
			font-size: 22rpx;
			color: #999999;
			line-height: 27rpx;

		}

		.btn {
			width: 640rpx;
			height: 100rpx;
			background: linear-gradient(90deg, #FFC53D 0%, #FE9B23 51%, #FFC53D 100%);
			box-shadow: 4rpx 12rpx 18rpx 0rpx rgba(254, 155, 35, 0.25);
			border-radius: 28rpx;
			display: flex;
			margin-top: 39rpx;
			justify-content: center;
			align-items: center;

			image {
				display: block;
				width: 40rpx;
				height: 40rpx;
				margin-right: 9rpx;
			}

			text {
				font-weight: bold;
				font-size: 36rpx;
				color: #FFFFFF;

			}
		}
	}

	.tabs {
		width: 640rpx;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;

		view {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			image {
				display: block;
				width: 82rpx;
				height: 82rpx;
				margin-bottom: 8rpx;
			}

			text {
				font-weight: 400;
				font-size: 28rpx;
				color: #16191B;

			}
		}
	}

	.ad {
		width: 702rpx;
		height: 230rpx;
		display: block;
		margin: 47rpx auto;
		.swiper{
			width: 702rpx;
			height: 230rpx;
		}
		image {
			display: block;
			
			width: 100%;
			height: 100%;
			border-radius: 36rpx;
		}
	}

	.block {
		display: block;
		font-weight: bold;
		font-size: 40rpx;
		color: #061239;
		line-height: 45rpx;
		margin-left: 24rpx;
	}

	.list {

		margin: 31rpx 24rpx;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;

		.item {
			width: 342rpx;
			padding-bottom: 30rpx;
			border-radius: 13rpx;
			border: 1px solid #ECF4F6;
			margin-bottom: 20rpx;

			.pic {
				width: 342rpx;
				height: 342rpx;
				background: #C2E0FF;
				border-radius: 13rpx;
				display: block;
			}

			.comment {
				font-weight: 400;
				font-size: 28rpx;
				color: #000000;
				line-height: 37rpx;

				margin: 20rpx auto 0;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				/* 显示的行数，可以根据需要修改 */
				overflow: hidden;
				text-overflow: ellipsis;
				width: 306rpx;
				height: 68rpx;
			}

			.user {

				display: flex;
				align-items: center;
				width: 306rpx;
				margin: 16rpx auto 0;

				image {
					display: block;
					border-radius: 50%;
					width: 46rpx;
					height: 46rpx;
					background: #ECF4F6;
					margin-right: 12rpx;
				}

				text {
					font-weight: 400;
					font-size: 22rpx;
					color: #585657;
					line-height: 30rpx;
				}
			}
		}
	}
</style>